<template>

  <div>

    <!--查询表单-->

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="szyxwQuery.xm" placeholder="学生姓名"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="szyxwQuery.xh" placeholder="学号"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="szyxwQuery.xy" clearable placeholder="学院" @change = "getbj(szyxwQuery.xy)">
         <el-option
            v-for = "(xym,index) in xyList" :key="index" :label="xym" :value="xym" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="szyxwQuery.bh" clearable placeholder="班级">
           <el-option
            v-for = "(bj,index) in bjList" :key="index" :label="bj" :value="bj" />
        </el-select>
      </el-form-item>
      </br>
      <el-form-item>
        <el-select v-model="szyxwQuery.dyzyzg" clearable placeholder="第一专业学位资格">
          <el-option value="有" label="有"/>
          <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="szyxwQuery.dyzyxwzg" clearable placeholder="第一专业毕业资格">
           <el-option value="有" label="有"/>
           <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="szyxwQuery.szybyzg" clearable placeholder="第二专业学位资格">
          <el-option value="有" label="有"/>
          <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="szyxwQuery.sxwxwzg" clearable placeholder="第二专业毕业资格">
           <el-option value="有" label="有"/>
           <el-option value="无" label="无"/>
        </el-select>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="getbysListByCondition()">查询</el-button>
      <el-button type="default" @click="clear()">清空</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
      <el-button type="danger" @click="showNewDialog()" :disabled="!isOpTime&&role!='admin'">新增</el-button>


    </el-form>

    <!--数据导入-->
<el-form label-width="90px">
      <el-row>

        <el-col :span="5" style="width:300px">
          <el-form-item label="信息描述">
          <el-tag type="info">excel模版说明</el-tag>
          <el-tag>
            <i class="el-icon-download" />
            <a :href="'/static/bysxfsx.xlsx'">点击下载模版</a>
          </el-tag>
        </el-form-item>
        </el-col>

        <el-col :span="5"  style="width:300px">
          <el-form-item label="选择模版">
          <el-upload ref="upload" :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="!isOpTime&&role!='admin'"
          :limit="1"
          :action="BASE_API+'/excel/importsxbys'"
          name="file"
          accept=".xlsx">
            <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
            <el-button :loading="loading" style="margin-left: 10px;" size="medium" type="success" @click="submitUpload" :disabled="!isOpTime&&role!='admin'">导入
            </el-button>
          </el-upload>
        </el-form-item>
        </el-col>


        <el-col :span="7.5">
          <el-form-item label="操作时间">
            <el-tag style="background-color:antiquewhite">
              <span style="color:black; font-size:14px">开始时间</span> <span
                style="color:black; font-size:16px"><b>{{startTime}}</b></span>
            </el-tag>
            <el-tag style="background-color:antiquewhite">
              <span style="color:black; font-size:14px">结束时间</span> <span
                style="color:black; font-size:16px"><b>{{endTime}}</b></span>
            </el-tag>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="当前状态">
            <el-tag v-if="isOpTime&&role!='admin'" style="background-color: #67c23a;"><span style="font-size:18px; color: white;">可操作</span></el-tag>
            <el-tag v-if="!isOpTime&&role!='admin'" style="background-color: #f56c6c;">
              <span v-if="!isOpTime&&role!='admin'" style="font-size:18px; color: white;"><b>不可操作（不在操作时间内）</b></span></el-tag>
            <el-tag v-if="role=='admin'" style="background-color: #67c23a;"><span style="font-size:18px; color: white;">可操作【管理员】</span></el-tag>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>



  <!--数据列表-->
    <el-table
    :data="xssjList"
    border
    style="width: 100%">
    <el-table-column
      prop="xh"
      label="学号"
      width="130">
    </el-table-column>

    <el-table-column
       prop="xm"
      label="姓名"
      width="80">
    </el-table-column>

    <el-table-column
      prop="xy"
      label="学院">
    </el-table-column>

    <el-table-column
      prop="zyh"
      label="专业名称">
    </el-table-column>

      <el-table-column
      prop="bh"
      label="班级">
    </el-table-column>

    <el-table-column
      prop="bjg"
      label="历年不及格课程">
    </el-table-column>

    <el-table-column
      prop="xx"
      label="选修课">
    </el-table-column>

    <el-table-column
      prop="jd"
      label="绩点">
    </el-table-column>

    <el-table-column
      prop="wj"
      label="违纪类型">
    </el-table-column>

    <el-table-column
      prop="dyzyzg"
      label="第一专业毕业资格"
      width="50">
    </el-table-column>

    <el-table-column
      prop="dyzyxwzg"
      label="第一专业学位资格"
      width="50">
    </el-table-column>

    <el-table-column
      prop="szybyzg"
      label="第二专业毕业资格"
      width="50">
    </el-table-column>

    <el-table-column
      prop="sxwxwzg"
      label="第二专业学位资格"
      width="50">
    </el-table-column>

    <el-table-column
      prop="bz"
      label="备注"
      width="80">
    </el-table-column>

    <el-table-column
      prop="address"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type = "primary" size="mini" icon="el-icon-edit" @click ="showDialogAndDate(scope.row.id)" :disabled="!isOpTime&&role!='admin'">修改</el-button>
        <el-button type = "danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)" :disabled="(!isOpTime||department!='校级')&&role!='admin'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
  background
  layout="prev, pager, next ,jumper, total"
  :current-page="page"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center"
  @current-change = "getbysListByCondition"
  >
 </el-pagination>

 <!--新增弹窗-->
    <el-dialog :visible.sync="SavedialogFormVisible" title="新增数据">
      <el-form :model="saveBys" label-width="140px">
        <el-form-item label="姓名">
          <el-input v-model="saveBys.xm" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="saveBys.xh" />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="saveBys.xy" />
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="saveBys.zyh" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="saveBys.bh" />
        </el-form-item>
        <el-form-item label="历年不及格课程">
          <el-input v-model="saveBys.bjg" />
        </el-form-item>
        <el-form-item label="选修课">
          <el-input v-model="saveBys.xx" />
        </el-form-item>
        <el-form-item label="绩点">
          <el-input v-model="saveBys.jd" />
        </el-form-item>
        <el-form-item label="违纪类型">
          <el-input v-model="saveBys.wj" />
        </el-form-item>
        <el-form-item label="第一专业毕业资格">
          <el-input v-model="saveBys.dyzyzg" />
        </el-form-item>
        <el-form-item label="第一专业学位资格">
          <el-input v-model="saveBys.dyzyxwzg" />
        </el-form-item>
        <el-form-item label="第二专业毕业资格">
          <el-input v-model="saveBys.szybyzg" />
        </el-form-item>
        <el-form-item label="第二专业学位资格">
          <el-input v-model="saveBys.sxwxwzg" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="saveBys.bz" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="SavedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改弹窗-->
    <el-dialog :visible.sync="dialogFormVisible" title="修改数据">
      <el-form :model="updateList" label-width="120px">
        <el-form-item label="姓名" readonly='true' >
          <el-input v-model="updateList.xm" />
        </el-form-item>
        <el-form-item label="学号" readonly='true'>
          <el-input v-model="updateList.xh" />
        </el-form-item>
        <el-form-item label="学院" readonly='true'>
          <el-input v-model="updateList.xy" />
        </el-form-item>
        <el-form-item label="专业名称" readonly='true'>
          <el-input v-model="updateList.zyh" />
        </el-form-item>
        <el-form-item label="班级" readonly='true'>
          <el-input v-model="updateList.bh" />
        </el-form-item>
        <el-form-item label="历年不及格课程">
          <el-input v-model="updateList.bjg" />
        </el-form-item>
        <el-form-item label="选修课">
          <el-input v-model="updateList.xx" />
        </el-form-item>
        <el-form-item label="绩点">
          <el-input v-model="updateList.jd" />
        </el-form-item>
        <el-form-item label="违纪类型">
          <el-input v-model="updateList.wj" />
        </el-form-item>
        <el-form-item label="第一专业毕业资格">
          <el-input v-model="updateList.dyzyzg" />
        </el-form-item>
        <el-form-item label="第一专业学位资格">
          <el-input v-model="updateList.dyzyxwzg" />
        </el-form-item>
        <el-form-item label="第二专业毕业资格">
          <el-input v-model="updateList.szybyzg" />
        </el-form-item>
        <el-form-item label="第二专业学位资格">
          <el-input v-model="updateList.sxwxwzg" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="updateList.bz" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import szyxwapi from '@/api/bysszyxw.js'
import fileDownload from 'js-file-download'
import bjapi from '@/api/bjxx.js'
import authapi from '@/api/Sauth.js'

  export default {
    data() {
      return {
       xyList: {},
      bjList: {},
      xssjList: null,
      page: 1,
      limit: 20,
      total: 0,
      szyxwQuery: {},
      exportQuery: {},
      BASE_API: process.env.BASE_API, // 接口API地址
      loading: false,
      updateList: {},
      dialogFormVisible: false,
      updateBys: {},//修改按钮数据
      saveBys: {},//新增按钮数据
      dialogFormVisible: false,//弹窗
      SavedialogFormVisible: false,//弹窗
      role: {},//角色admin/user
      department: {},//部门
      isOpTime: {},//是否在可操作时间
      Fname: 'F103',//功能所属编号
      startTime: {},
      endTime: {},
      }
    },

    created(){
      this.getAllbysList()
      this.getxy()
      this.getAuth()
      this.getOpTime()
      this.getDept()
    },

    methods:{

     //权限获取
    getAuth() {
      authapi.getRole().then(response => {
        this.role = response.data.role
      })
    },

    //院校级检查
    getDept() {
      authapi.getDept().then(response => {
        this.department = response.data.department
      })
    },

    //是否在可操作时间
    getOpTime() {
      authapi.getOpTime(this.Fname).then(response => {
        this.isOpTime = response.data.isTime
        this.startTime = response.data.startTime
        this.endTime = response.data.endTime
      })
    },

    //新增一条按钮
    save() {
      szyxwapi.save(this.saveBys).then(response => {
        this.$message({
          type: 'success',
          message: '新增成功!'
        })
        this.SavedialogFormVisible = false
        this.gettsbysListByCondition()
      })
    },

    //显示新增弹窗
    showNewDialog() {
      this.SavedialogFormVisible = true
    },

    //修改按钮
    update() {
      szyxwapi.updatebysById(this.updateBys).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.dialogFormVisible = false
      })
    },

    //显示修改弹窗
    showDialogAndDate(id) {
      szyxwapi.getbysById(id).then(response => {
        this.updateList = response.data.bys
      })

      this.dialogFormVisible = true
    },

      getxy(){
        bjapi.getXy().then(response=>{
          this.xyList = response.data.xylist
        })
      },

      getbj(xym){
        bjapi.getBjByXy(xym).then(response=>{
            this.bjList = response.data.bjList
        })
      },
      Update(){

      },
      showDialogAndDate(id){

        szyxwapi.getbysById(id).then(response=>{
          this.updateList = response.data.bys
        })

        this.dialogFormVisible=true
      },

      fileUploadSuccess(response){
        if (response.success === true) {
        this.fileUploadBtnText = '导入成功'
        this.loading = false
        this.$message({
        type: 'success',
        message: response.message
      })
      setTimeout("location.reload()", 1500 )

    }
      },

      fileUploadError(){
        this.fileUploadBtnText = '导入失败'
        this.loading = false
        this.$message({
        type: 'error',
          message: '导入失败'
          })
      },

      submitUpload(){
          this.fileUploadBtnText = '正在上传'
          this.importBtnDisabled = true
          this.loading = true
          this.$refs.upload.submit()
      },



      clear(){
          this.szyxwQuery = {}
          this.getAllbysList()
      },

      exportExcel(){
        szyxwapi.exportdata(this.exportQuery).then((res)=>{
            fileDownload(res, '毕业生信息表.xlsx')
          });
      },




      getAllbysList(page=1){
        this.page = page
        szyxwapi.getbyssj(this.page,this.limit).then(response=>{
          this.xssjList = response.data.list
          this.total = response.data.total
        })
      },

      getbysListByCondition(page=1){
         this.page = page
         szyxwapi.byssjPageCondition(this.page,this.limit,this.szyxwQuery)
          .then(response=>{
              this.total = response.data.total
              this.xssjList = response.data.list
              //查询之后更新导出的数据为所查询数据
              this.exportQuery = this.szyxwQuery
              //清空查询条件
              this.bysQuery = {}
          })

      },

      removeDataById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return szyxwapi.removeById(id)
    }).then(() => {
        this.getbysListByCondition()
        this.$message({
            type: 'success',
            message: '删除成功!'
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
    })
},



    }


  }
</script>
